<template>
	<view class="page" :style="{height:mainHeight+'px'}">
		<view style="height: 20rpx;">
			<!-- 占位，设置margin顶部会滚动 -->
		</view>
		<view @click="goSearch" class="search-input-containt">
			<image class="search-input-icon-search" src="/static/images/bus/search_icon3x.png"></image>
			<text class="search-input-edit">查找公交线路</text>
		</view>

		<view class="tab-box">
			<view class="tab-list">
				<view class="tab-item" v-for="(item,index) in tabbar" :key="index"
					:class="[swiperIndex==index ? 'active' : '']" @click.stop="swichNav(index)">
					<text :class="[swiperIndex==index?'font-bold-30':'font-normal-28']">{{item.text}}</text>
					<image v-if="swiperIndex==index" src="/static/images/bus/tab-press1.png"></image>
				</view>
			</view>
		</view>

		<swiper @change="changeTab" :current="swiperIndex" :style="{height:contentHeight+'px'}"
			style="margin-top:40rpx;">
			<swiper-item>
				<!-- 没有开启定位 -->
				<view class="card_container" style="margin-top:40rpx;" v-if="showlocerr">
					<view style="text-align:center">
						<view style="padding:60rpx;font-size:32rpx;text-align:center">
							<text>“实时公交”需要您当前的位置信息 建议打开手机定位试一下(如以打开，请下拉刷新试试)</text>
						</view>
						<!-- #ifdef MP -->
						<button open-type="openSetting" class="button-k font-color-weak"
							style="margin-top:20rpx;margin-bottom: 60rpx;">
							去开启定位
						</button>
						<!-- #endif -->

					</view>
				</view>
				<!-- 没有数据 -->
				<view class="card_container" style="margin-top:40rpx;" v-if="nodata">
					<view style="text-align:center">
						<view style="padding:60rpx 150rpx;font-size:32rpx;text-align:center;color: rgba(0,0,0,0.38);">
							<text>咦…附近没有公交线路哦~ 建议搜索一下试试或下拉刷新试试</text>
						</view>
					</view>
				</view>


				<!-- 站点列表 -->
				<scroll-view scroll-x="false" scroll-y="true" :show-scrollbar="false"
					:style="{height:contentHeight+'px'}" style="top:0">
					<!-- <view class="station-card">
					<view  class="station-card-head station-card-head-border-bottom">
						<view class="left">
							<image src="/static/images/bus/station_car.png"></image>
							<text class="station-name text-ellipsis">省政府后门</text>
							<text class="home-font-sub font-color-weak-28">200m</text>
						</view>
						<view class="right">
							<text class="home-font-sub">收起</text>
							<image src="/static/images/bus/station_open.png"></image>
						</view>
					</view>
					
					<view class="station-card-list">
						<view class="station-card-list-item">
							<view class="line-name">
								<view class="left">37路</view>
								<view class="right">
									  <image src="/static/images/bus/an_realtime.gif"></image>
									  <text>1分钟 • 两站</text>
								</view>
							</view>
							<view class="line-direction">
								开往 <text>贵阳北站</text>
							</view>
						</view>
						<view class="station-card-list-item">
							<view class="line-name">
								<view class="left">37路</view>
								<view class="right">
									  <image src="/static/images/bus/an_realtime.gif"></image>
									  <text>1分钟 • 两站</text>
								</view>
							</view>
							<view class="line-direction">
								开往 <text>贵阳北站</text>
							</view>
						</view>
					</view>
					
					<view class="see-all">
					    <text class="font-color-weak-28">查看全部</text>
					</view>
					
					
					<view class="station-card-tag-list">
							<view class="tag-item">
								12路
							</view>
							<image class="more-img" src="/static/images/bus/more.png"></image>
				</view> -->

					<view class="station-card" v-for="(stationItem,stationIndex) in stationList" :key="stationIndex">
						<view class="station-card-head station-card-head-border-bottom"
							@click.stop="changeStationState(stationItem,stationIndex)">
							<view class="left">
								<image src="/static/images/bus/station_car.png"></image>
								<text class="station-name text-ellipsis">{{stationItem.stationName}}</text>
								<text class="home-font-sub font-color-weak-28">{{stationItem.distance.toFixed(0)}}m</text>
							</view>
							<view class="right">
								<!-- <text class="home-font-sub">{{stationItem.isOpen ? '收起' : '展开'}}</text>
								<image
									:src="stationItem.isOpen ? '/static/images/bus/station_open.png' : '/static/images/bus/station_close.png'">
								</image> -->
							</view>
						</view>

						<view class="station-card-list" v-show="stationItem.isOpen">
							<block v-for="(lineItem,lineIndex) in stationItem.nearbySegment" :key="lineIndex">
								<view class="station-card-list-item" v-if="stationIndex == 0 && lineIndex < 2"
									@click="goLinesPage(lineItem,stationItem)">
									<view class="line-name">
										<view class="left">{{lineItem.lineName}}</view>
										<view class="right">
											<image src="/static/images/bus/an_realtime.gif"></image>
											<!-- <text>1分钟 • 2站</text> -->
											<text v-if="lineItem.isRun==null" style="color: rgba(0, 0, 0, 0.38);">{{lineItem|formatDisplay}}</text>
											<text v-else>{{lineItem|formatDisplay}}</text>
										</view>
									</view>
									<view class="line-direction">
										<!-- 开往 <text>{{lineItem.terminal}}</text> -->
										{{lineItem.startStop}}
									</view>
								</view>
								<view class="station-card-list-item"
									v-else-if="optenType == false || stationIndex !== 0"
									@click="goLinesPage(lineItem,stationItem)">
									<view class="line-name">
										<view class="left">{{lineItem.lineName}}</view>
										<view class="right">
											<image src="/static/images/bus/an_realtime.gif"></image>
											<!-- <text>1分钟 • 2站</text> -->
											<text v-if="lineItem.isRun==null" style="color: rgba(0, 0, 0, 0.38);">{{lineItem|formatDisplay}}</text>
											<text v-else>{{lineItem|formatDisplay}}</text>
										</view>
									</view>
									<view class="line-direction">
										<!-- 开往 <text>{{lineItem.terminal}}</text> -->
										{{lineItem.startStop}}
									</view>
								</view>
							</block>
							<!-- 查看全部 -->
							<view class="see-all" v-if="stationIndex == 0 && stationItem.nearbySegment.length > 2"
								@click="setOptenType">
								<text class="font-color-weak-28">{{optenType?'查看全部':'收起'}}</text>
							</view>
						</view>



						<view class="station-card-tag-list" v-show="!stationItem.isOpen">

							<view style="display: inline-block;"
								v-for="(lineItem,lineIndex) in stationItem.nearbySegment" :key="lineIndex">
								<view class="tag-item" v-if="lineIndex < 10">
									{{lineItem.lineName}}
								</view>
								<image class="more-img" v-if="lineIndex == 10" src="/static/images/bus/more.png">
								</image>
							</view>

						</view>

					</view>


				</scroll-view>
			</swiper-item>

			<swiper-item>

				<!-- 收藏未为空提示 -->
				<view class="column" style="width:100%" v-if="!collectList.length">
					<image src="https://qiniu.gybsky.cn/other%2F111b4a622e52d7bcc7cb7f0df3b76e9a.png"
						style="width:180rpx;height:180rpx;margin-top:160rpx;margin-left:auto;margin-right:auto;margin-bottom: 40rpx;">
					</image>
					<text style="margin-top:-60rpx;margin-left:auto;margin-right:auto;">还没有收藏的公交线路</text>
				</view>

				<!-- 收藏列表 -->
				<scroll-view scroll-top="0" scroll-x="false" scroll-y="true" 
				:show-scrollbar="false" :style="{height:contentHeight+'px'}" style="top:0" 
				v-if="collectList.length !== 0">
					<block v-for="(collectListItem,collectListIndex) in collectList" :key="collectListIndex">
						<view class="collection-list" @click="selectLine(collectListItem)">
							<view class="collection-list-item">
								<view class="line-name">
									<view class="left">{{collectListItem.lineName}}</view>
									<view class="right">
										<!-- <image src="/static/images/bus/an_realtime.gif"></image> -->
										<text>{{collectListItem.drivingDirection == 1?'正向':collectListItem.drivingDirection == 2?'反向':'环线'}}</text>
									</view>
								</view>
								<view class="line-direction">
									{{collectListItem.segmentName}}
								</view>
							</view>
						</view>
					</block>

				</scroll-view>
			</swiper-item>
		</swiper>

		<!-- <navigator url="../real_bus/line_detail">详情页</navigator> -->
		<u-no-network></u-no-network>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				firstEntry: true,//首次获取
				tabbar: [{
						state: 0,
						text: '附近公交站',
					},
					{
						state: 1,
						text: '收藏线路',
					},
				],
				swiperIndex: 0,
				contentHeight: '',
				mainHeight: '',
				showlocerr: false, //定位是否开启
				nodata: false, //没有数据提示

				stationList: [], //站点列表

				collectList: [], //收藏列表
				optenType: true,
				
				setInterTime: null //定时器对象

			};
		},
		onLoad() {
			//  高度自适应
			let that = this
			uni.getSystemInfo({
				success: function(res) {
					// console.log(res);
					let calc = res.windowHeight;
					that.mainHeight = calc;
					that.contentHeight = calc - 120;
				}
			});
		},
		onShow() {
			let that = this;
			if(this.swiperIndex == 0){
				this.location();
				clearInterval(this.setInterTime);
				this.setInterTime = setInterval(() => {
					that.stationList.forEach((val,index)=>{
						if(val.isOpen){
							that.getNearStationBusTime(index);
						}
					})
				}, 10000)
			}else{
				// 收藏
				this.initCollect();
			}
		},
		onPullDownRefresh() {
			let that = this;
			if(this.swiperIndex == 0){
				// 定位
				this.location();
			}else{
				// 收藏
				this.initCollect();
			}
			setTimeout(function(){
				uni.stopPullDownRefresh();
			},1500)
		},
		onUnload() {
			clearInterval(this.setInterTime);
		},
		onHide() {
			clearInterval(this.setInterTime);
		},
		filters:{
			formatDisplay(val){
				if(val.isRun==null){
					return '正在查询';
				}
				if(!val.isRun){
					return '不在运营时间';
				}
				if(val.targetStationCount==null){
					return '等待发车';
				}
				if(val.targetStationCount==0){
					return '已到站';
				}
				if(val.targetStationDistance<400 && val.targetStationCount>0){
					return '即将到站';
				}
				
				let time = val.targetStationDistance/val.speed;
				
				return `${(time/60).toFixed(0)}分钟 • ${val.targetStationCount}站`;
			}
		},
		methods: {
			// 获取位置信息
			location(){
				let that = this;
				// #ifdef H5
				// let getData = {
				// 	// 国际会议中心东
				// 	"longitude": 106.646413,
				// 	"latitude": 26.635805
				// }
				// 国际会议中心
				let getData = {
					// 国际会议中心东
					"longitude": 106.649868,
					"latitude": 26.638242
				}
				uni.setStorageSync('getData', getData);
				that.getNearStation(getData);
				// #endif
				
				// 定位获取经纬度
				// #ifdef MP-WEIXIN || APP-PLUS
				uni.getLocation({
					type: 'gcj02',
					success: function(res) {
						// console.log(JSON.stringify(res));
						that.showlocerr = false;
						let getData = {
							"longitude": res.longitude,
							"latitude": res.latitude
						}
						uni.setStorageSync('getData', getData);
						that.getNearStation(getData);
					},
					complete: function(res) {},
					fail: function(res) {
						console.log(JSON.stringify(res));
						that.showlocerr = true //定位失败
					}
				});
				// #endif
			},
			getNearStation(getData) { //获取附近站点
				if(!this.$Common.isGetToken()){
					this.$Common.replaceToken();
				}
				let that = this;
				let header = {
					"content-type": "application/json",
					"Authorization": "Bearer " + uni.getStorageSync('token')
				};
				this.$request({
					url: this.$API.getNearStation,
					data: getData,
					header: header,
					timeout: 20000,
					isShowLoading: true,
					lodingText: '加载中...'
				}).then(res => {
					// console.log(JSON.stringify(res));
					if (res.code == 200) {
						if (res.data.length == 0) { //附近没有站点
							that.nodata = true;
							return false;
						}
						this.stationList = res.data;
						this.stationList.sort(function(a,b){ //按距离近到远排序
							return a.distance - b.distance
						});
						this.stationList.forEach((val, index) => {
							index == 0 ? that.$set(val, 'isOpen', true) : that.$set(val, 'isOpen', false);
						})
						that.getNearStationBusTime(0);
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(err => {
					console.log(JSON.stringify(err));
				});
			},
			getNearStationBusTime(stationIndex){ //到站时间，index站点的数组索引
				let that = this;
				if(!this.$Common.isGetToken()){
					this.$Common.replaceToken();
				}
				let header = {
					"content-type": "application/json",
					"Authorization": "Bearer " + uni.getStorageSync('token')
				};
				let getData = {
					stationIdz:this.stationList[stationIndex].stationId, //站点id
					stationName:this.stationList[stationIndex].stationName //站点名
				};
				this.$request({
					url: this.$API.getNearStationBusTime,
					data: getData,
					header: header,
					timeout: 20000
					// isShowLoading: true,
					// lodingText: '加载中...'
				}).then(res => {
					if (res.code == 200) {
						that.stationList[stationIndex].nearbySegment = res.data;
					} 
					// console.log("hhhh:"+JSON.stringify(res));
				}).catch(err => {
					console.log(JSON.stringify(err));
				});
			},
			goSearch() {
			var cityName = Cache.has(CITY_INFO)? JSON.parse(Cache.get(CITY_INFO)).name : ''
				uni.navigateTo({
					url: `/pages/real_bus/xr_search?city=${cityName}`
				})
			},
			goLinesPage(lineItem, stationItem) { //跳转到详情页
				clearInterval(this.setInterTime);
				// #ifdef MP || H5
				uni.navigateTo({
					url: `../real_bus/xr_line_detail?source=1&stationId=${stationItem.stationId}&stationName=${stationItem.stationName}&lineId=${lineItem.lineId}`
				})
				// #endif
				
				// #ifdef APP-PLUS
				uni.navigateTo({
					url: `../real_bus/xr_line_detail_app?source=1&stationId=${stationItem.stationId}&stationName=${stationItem.stationName}&lineId=${lineItem.lineId}`
				})
				// #endif
			},
			changeStationState(stationItem,stationIndex) { //展开收起
				// console.log(JSON.stringify(stationItem));
				uni.navigateTo({
					url: `/pages/real_bus/xr_stationList?stationName=${stationItem.stationName}`
				})
				return;
				uni.navigateTo({
					url: `/pages/real_bus/xr_stationList?stationName=${stationItem.stationName}&&stationData=${JSON.stringify(stationItem)}`
				})
				return;
				this.stationList[stationIndex].isOpen = !this.stationList[stationIndex].isOpen
				if(this.stationList[stationIndex].isOpen){
					this.getNearStationBusTime(stationIndex);
				}
				
			},
			// 点击查看更多
			setOptenType() {
				this.optenType = !this.optenType;
			},

			// 点击标题切换当前页时改变样式
			swichNav(e) {
				let cur = e;
				if (this.swiperIndex == cur) {
					return false;
				} else {
					this.swiperIndex = cur
					//this.loadData(this.currentTab);
					if(this.swiperIndex == 1){
						this.initCollect(true);//收藏线路
					}
				}

			},
			// 滚动切换标签样式
			changeTab: function(e) {
				let that = this;
				this.swiperIndex = e.detail.current;
				if(this.swiperIndex == 1){
					this.initCollect(true);//收藏线路
				}
			},
			//获取收藏线路
			initCollect(isShowLoading){
				if(!this.$Common.isGetToken()){
					this.$Common.replaceToken();
				}
				let that = this;
				if(isShowLoading !== true){
					isShowLoading = false
				}
				let header = {
					"content-type": "application/json",
					"Authorization": "Bearer " + uni.getStorageSync('token')
				};
				let query = {
						openId:uni.getStorageSync('openId')
					};
				this.$request({
					url: this.$API.queryAllCollect,
					data: query,
					header: header
					// isShowLoading: isShowLoading
				}).then(res => {
					// console.log(JSON.stringify(res));
					if (res.code == 200) {
						that.collectList = res.data;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(err => {
					console.log(JSON.stringify(err));
				});
			},
			// 跳转详情，不传站点
			selectLine(item){
				clearInterval(this.setInterTime);
				// 跳转页面
				// #ifdef MP || H5
				uni.navigateTo({
					url: `/pages/real_bus/xr_line_detail?source=3&stationId=&stationName=&lineId=${item.lineId}&drivingDirection=${item.drivingDirection}`
				})
				// #endif
				
				// #ifdef APP-PLUS
				uni.navigateTo({
					url: `/pages/real_bus/xr_line_detail_app?source=3&stationId=&stationName=&lineId=${item.lineId}&drivingDirection=${item.drivingDirection}`
				})
				// #endif
			}
		}

	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #FFFFFF;
	}

	.page {
		background-color: #FFFFFF;
	}

	// 搜索
	.search-input-containt {
		display: flex;
		align-items: center;
		margin: 0rpx 40rpx;
		padding: 16rpx;
		border: 1px solid #DBE0E9;
		border-radius: 50rpx;
		background-color: #EEF0F4;

		.search-input-icon-search {
			width: 40rpx;
			height: 40rpx;
			margin: 0 8rpx;
		}

		.search-input-edit {
			color: #909399;
		}
	}

	// 选项卡
	.tab-box {
		margin-top: 40rpx;
		text-align: center;
		height: 46rpx;

		.tab-list {
			display: inline-flex;
			flex-direction: row;

			.tab-item {
				margin-right: 100rpx;
				display: flex;
				flex-direction: column;

				image {
					width: 32rpx;
					height: 6rpx;
					margin-left: auto;
					margin-right: auto;
					margin-top: 12rpx;
				}
			}
		}
	}

	// 站点列表
	.station-card {
		background-color: #fff;
		border-radius: 16rpx;
		box-shadow: 0rpx 4rpx 16rpx rgba(0, 0, 0, 0.1);
		margin: 40rpx;
		padding: 0 40rpx;

		.station-card-head {
			display: flex;
			justify-content: space-between;
			padding: 30rpx 0;

			.left {
				display: flex;
				align-items: center;

				.station-name {
					font-weight: bold;
					// font-size: 30rpx;
					color: rgba(0, 0, 0, 0.87);
				}

				image {
					height: 50rpx;
					width: 50rpx;
					margin-right: 6rpx;
				}

				.home-font-sub {
					margin-top: 8rpx;
					margin-left: 10rpx;
				}
			}

			.right {
				display: flex;
				align-items: center;

				image {
					height: 48rpx;
					width: 48rpx;
				}
			}
		}

		.station-card-head-border-bottom {
			border-bottom: 1px solid rgba(224, 224, 224, 0.4);
		}

		// 列表
		.station-card-list {
			margin-top: 50rpx;

			.station-card-list-item {
				padding-bottom: 60rpx;

				.line-name {
					display: flex;
					justify-content: space-between;

					.left {
						font-weight: bold;
						color: rgba(0, 0, 0, 0.87);
					}

					.right {
						font-size: 32rpx;
						// color: #8f8f8f; //另一种字体颜色
						color: #26a2ff;
						font-weight: bold;

						image {
							margin-right: 10rpx;
							width: 12rpx;
							height: 24rpx;
						}
					}
				}

				.line-direction {
					color: rgba(0, 0, 0, 0.38);
					margin-top: 12rpx;
					font-size: 28rpx;

					text {
						margin-left: 14rpx;
					}
				}

			}


		}

		.see-all {
			text-align: center;
			padding: 20rpx;
			border-top: 1px solid rgba(224, 224, 224, 0.4);
		}

		// tag
		.station-card-tag-list {
			padding-bottom: 30rpx;

			.tag-item {
				display: inline-block;
				background-color: #e9f6ff;
				color: #26a2ff;
				border-radius: 8rpx;
				margin: 8rpx;
				padding: 4rpx 10rpx;
				border: 0.5px solid rgba(0, 0, 0, 0.1);
			}

			.more-img {
				height: 4rpx;
				width: 22rpx;
				margin-left: 10rpx;
			}
		}

	}

	// 收藏列表
	.collection-list {
		margin-top: 50rpx;

		.collection-list-item {
			border-radius: 16rpx;
			box-shadow: 0rpx 4rpx 16rpx rgba(0, 0, 0, 0.1);
			padding: 40rpx;
			margin: 40rpx;

			.line-name {
				display: flex;
				justify-content: space-between;

				.left {
					font-weight: bold;
					color: rgba(0, 0, 0, 0.87);
				}

				.right {
					font-size: 32rpx;
					color: #26a2ff;
					// color: #8f8f8f; //另一种字体颜色
					font-weight: bold;

					image {
						margin-right: 10rpx;
						width: 12rpx;
						height: 24rpx;
					}
				}
			}

			.line-direction {
				color: rgba(0, 0, 0, 0.38);
				margin-top: 12rpx;
				font-size: 28rpx;

				text {
					margin-left: 14rpx;
				}
			}

		}

	}
</style>
